Unidad 7 - Bootstrap

Bootstrap es uno de los frameworks CSS más utilizados del mundo para crear interfaces responsive modernas, rápidas y visualmente atractivas. Incluye sistema Grid, componentes, formularios, utilidades y JavaScript integrado.

7.1 ¿Qué es Bootstrap?

framework responsive

Bootstrap es un framework frontend creado inicialmente por Twitter. Permite desarrollar páginas web responsive utilizando clases CSS ya preparadas.

Ventajas

  • Desarrollo rápido.
  • Diseño responsive automático.
  • Componentes reutilizables.
  • Compatible con móviles.
  • Gran comunidad.

CDN Bootstrap

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

¿Qué es Popper?

Bootstrap usa Popper.js para posicionar tooltips, dropdowns y popovers.

Es recomendable descargar Bootstrap localmente y no depender solo de CDNs externos.

Mini-test

1. ¿Qué es Bootstrap?

7.2 Layout - Containers y Break Points

container responsive

Bootstrap utiliza containers para estructurar el contenido.

Tipos de containers

Clase Función
container Ancho adaptable centrado
container-fluid Ocupa 100%
<div class="container text-center py-5"> <h1 class="display-1">Bootstrap</h1> </div>

Breakpoints

Breakpoint Tamaño
sm ≥576px
md ≥768px
lg ≥992px
xl ≥1200px
Bootstrap sigue filosofía mobile-first.

Mini-test

1. ¿Qué clase ocupa el 100% del ancho?

7.3 Layout - Grid y Gutters

grid gutters

Bootstrap usa un sistema Grid de 12 columnas.

Ejemplo Grid

<div class="row"> <div class="col-4 bg-danger">col-4</div> <div class="col-4 bg-primary">col-4</div> <div class="col-4 bg-success">col-4</div> </div>

Grid responsive

<div class="col-12 col-md-6 col-lg-4"> Contenido </div>

Gutters

Los gutters son espacios entre columnas.

<div class="row gx-5 gy-3">
  • gx-* → espacio horizontal.
  • gy-* → espacio vertical.
  • g-* → ambos.
La suma de columnas debe respetar 12.

Mini-test

1. ¿Cuántas columnas tiene el Grid Bootstrap?

7.4 Content - Typography y Text Utilities

typography

Bootstrap ofrece estilos tipográficos preparados.

Displays

<h1 class="display-1">Título</h1>

Párrafo elegante

<p class="lead"> Texto destacado </p>

Alineaciones

text-start text-center text-end

Transformación de texto

text-uppercase text-lowercase text-capitalize

Citas

<figure> <blockquote class="blockquote"> <p>Texto cita</p> </blockquote> <figcaption class="blockquote-footer"> Autor </figcaption> </figure>
Bootstrap incluye cientos de utilidades CSS listas para usar.

Mini-test

1. ¿Qué clase centra texto?

7.5 Content - Images y Tables

images tables

Imágenes fluidas

<img src="foto.jpg" class="img-fluid">

.img-fluid aplica:

max-width:100%; height:auto;

Miniaturas

<img src="foto.jpg" class="img-thumbnail">

Tablas Bootstrap

<table class="table table-dark table-striped">

Responsive tables

<div class="table-responsive"> </div>
Clase Función
table-striped Filas alternas
table-hover Efecto hover
table-bordered Bordes

Mini-test

1. ¿Qué clase hace responsive una tabla?

7.6 Forms - Inputs y Validación

forms

Input Bootstrap

<input type="text" class="form-control">

Formulario completo

<form class="row g-3"> <div class="col-md-6"> <label class="form-label"> Nombre </label> <input type="text" class="form-control"> </div> </form>

Validación

<form class="was-validated">

Etiquetas flotantes

<div class="form-floating"> <input type="email" class="form-control" placeholder="correo"> <label>Correo</label> </div>
Los placeholders son obligatorios para form-floating.

Mini-test

1. ¿Qué clase se usa para inputs Bootstrap?

7.7 Components I

accordion alerts

Accordion

<div class="accordion"> </div>

Alertas

<div class="alert alert-warning"> Mensaje </div>

Badges

<span class="badge bg-danger"> NEW </span>

Breadcrumbs

<nav> <ol class="breadcrumb"> <li class="breadcrumb-item"> Inicio </li> </ol> </nav>
Los components son reutilizables y muy rápidos de implementar.

Mini-test

1. ¿Qué componente crea rutas de navegación?

7.8 Components II

buttons cards

Botones

<button class="btn btn-danger"> Eliminar </button>

Cards

<div class="card"> <img src="foto.jpg" class="card-img-top"> <div class="card-body"> <h5 class="card-title"> Título </h5> </div> </div>

Carousel

<div class="carousel slide"> </div>

Dropdown

<div class="dropdown"> </div>
Las imágenes del carousel deben tener igual tamaño.

Mini-test

1. ¿Qué componente muestra diapositivas?

7.9 Components III

modals navbar

List Groups

<ul class="list-group"> <li class="list-group-item"> Elemento </li> </ul>

Modal

<div class="modal fade"> </div>

Navs & Tabs

<ul class="nav nav-tabs"> </ul>

Navbar

<nav class="navbar navbar-dark bg-dark"> </nav>
Los modales son muy usados para confirmaciones y formularios rápidos.

Mini-test

1. ¿Qué componente crea ventanas emergentes?

7.10 Components IV

pagination

Pagination

<ul class="pagination"> </ul>

Popovers

<button data-bs-toggle="popover"> Info </button>

Progress

<div class="progress"> <div class="progress-bar" style="width:75%"> 75% </div> </div>
Los popovers necesitan Popper.js.

Mini-test

1. ¿Qué componente muestra barras de progreso?

7.11 Components V

scrollspy

Scrollspy

data-bs-spy="scroll"

Actualiza automáticamente navegación según scroll.

Spinners

<div class="spinner-border"> </div>

Toasts

<div class="toast show"> </div>
Los spinners indican procesos de carga.

Mini-test

1. ¿Qué componente muestra animaciones de carga?

7.12 Iconos

icons

Bootstrap Icons es la librería oficial de iconos Bootstrap.

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">

Uso

<i class="bi bi-alarm"></i>

Ejemplos

Icono Clase
🔍 bi-search
🏠 bi-house
❤️ bi-heart
Bootstrap Icons es independiente del framework principal.

Mini-test

1. ¿Qué prefijo usan Bootstrap Icons?

Unidad 7 completada 🚀